<template>
  <div class="search-box">
    <div class="top">
      <header class="hotlist-top">
        <p class="go-back">
          <van-icon name="arrow-left" size="20px" @click="goBack" />
        </p>
        <p class="search">
          <van-search
            v-model="val"
            placeholder="请输入搜索关键词"
            show-action
            shape="round"
          >
            <div class="search-btn" slot="action" @click="search">搜索</div>
          </van-search>
        </p>
      </header>
      <div>
        <h3>
          最近搜索<span>
            <van-icon name="delete-o" @click="delWord" />
          </span>
        </h3>
      </div>
      <div class="list">
        <van-tag
          plain
          @click="searchWord(item)"
          type="primary"
          v-for="(item, index) in searchList"
          :key="index"
          class="sou"
        >
          {{ item }}</van-tag
        >
      </div>
      <div>
        <h3>热门搜索</h3>
      </div>
      <div class="list">
        <van-tag
          plain
          @click="searchWord(item.keyword)"
          type="primary"
          v-for="(item, index) in hotlist"
          :key="index"
          class="sou"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, Search } from "vant";

Vue.use(NavBar);
Vue.use(Search);
import { hotWord } from "../api/search";
export default {
  name: "Search",
  data() {
    return {
      val: "",
      hotlist: [],
      searchList: [],
    };
  },
  methods: {
    goBack() {
      this.$router.back(); //回退
    },
    search() {
      if (localStorage.getItem("searchList")) {
        if (this.searchList.indexOf(this.val) != -1) {
          this.searchList.splice(this.searchList.indexOf(this.val), 1);
          this.searchList.unshift(this.val);
          localStorage.setItem("searchList", JSON.stringify(this.searchList));
        } else {
          this.searchList.unshift(this.val);
          localStorage.setItem("searchList", JSON.stringify(this.searchList));
        }
      } else {
        console.log("没有");
        this.searchList.unshift(this.val);
        localStorage.setItem("searchList", JSON.stringify(this.searchList));
      }
      this.searchList.unshift(this.val);
      // console.log(this.searchList);
      localStorage.setItem("searchList", JSON.stringify(this.searchList));
      this.$router.push("/navs/" + this.val);
    },
    searchWord(word) {
      if (localStorage.getItem("searchList")) {
        if (this.searchList.indexOf(word) != -1) {
          this.searchList.splice(this.searchList.indexOf(word), 1);
          this.searchList.unshift(word);
          localStorage.setItem("searchList", JSON.stringify(this.searchList));
        } else {
          this.searchList.unshift(word);
          localStorage.setItem("searchList", JSON.stringify(this.searchList));
        }
      } else {
        this.searchList.unshift(word);
        localStorage.setItem("searchList", JSON.stringify(this.searchList));
      }
      this.$router.push("/navs/" + word);
    },
    changeFn(val) {
      console.log(val);
    },
    // onConfirm() {
    //     this.$refs.toggle();
    //     console.log("点击了按钮");
    // },
    delWord() {
      console.log("删了");
      localStorage.removeItem("searchList");
      window.location.reload();
    },
  },
  created() {
    if (JSON.parse(localStorage.getItem("searchList")) != null) {
      this.searchList = JSON.parse(localStorage.getItem("searchList"));
    }
    hotWord().then((res) => {
      if (res.data.code == 200) {
        console.log("商品搜索：", res.data.data);
        this.hotlist = res.data.data;
      }
    });
  },
};
</script>

<style scoped>
.search-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hotlist-top {
  height: 45px;
  display: flex;
  justify-content: space-between;
}
.go-back {
  line-height: 54px;
  width: 15px;
}
.search {
  flex: 1;
}
.search-btn {
  background-color: red;
  color: white;
  height: 25px;
  line-height: 25px;
  padding: 0 4px;
  border-radius: 4px;
}
.main {
  flex: 1;
  overflow: auto;
  background-color: #ededed;
}
.goods-item {
  margin: 10px 0;
}
.list {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}
.sou{
  margin: 4px;
  padding: 2px;
  width: 40px;
  text-align: center;
  border: 1px solid gray;
}
</style>